<template>
  <!-- default-active="1" 默认亮的哪个  -->

  <el-menu
    :default-active="'index' + route.path"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    text-color="#fff"
    background-color="#333744"
    @open="handleOpen"
    @close="handleClose"
  >
    <div @click="changeIsCollapse" class="changeIsCollapse">
      <el-icon v-if="props.isCollapse"><Expand /></el-icon>
      <el-icon v-else="props.isCollapse"><Fold /></el-icon>
    </div>
    <template v-for="(v, i) in store.state.routes.routes" :key="v.path">
      <el-sub-menu :index="'index' + i" v-if="v.children">
        <template #title>
          <el-icon><location /></el-icon>
          <!-- 添加展示数据 -->
          <span>{{ v.title }}</span>
        </template>

        <!-- 循环二级菜单 -->
        <el-menu-item-group v-for="(val, index) in v.children" :key="val.path">
          <el-menu-item
            :index="'index' + val.path"
            @click="() => router.push(val.path)"
          >
            <el-icon><FullScreen /></el-icon>
            {{ val.title }}</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
      <!-- 不带下拉的列表 -->

      <el-menu-item
        :index="'in' + i"
        v-else
        @click="() => router.push(v.path)"
        v-if="v.title"
      >
        <el-icon><location /></el-icon>
        <!-- 添加展示数据 -->
        <span>{{ v.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted, reactive } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  FullScreen,
  Expand,
  Fold,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
const store = useStore();
const route = useRoute();
console.log(store.state.routes.routes, "动态路由");

// 声明路由
const router = useRouter();
// 接收父组件传入的参数
const props = defineProps(["isCollapse", "changeIsCollapse"]);

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
  console.log(123);
};
const changeIsCollapse = () => {
  props.changeIsCollapse();
  console.log(props, props.isCollapse, "props");
};
console.log(route, router, "路由");
console.log(router, router.options.routes, "路由总表");
</script>

<style>
.changeIsCollapse {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  font-size: 20px;
  background-color: #4a5064;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
.el-menu {
  height: 100%;
}
.el-aside {
  overflow: auto;
  box-sizing: border-box;
  flex-shrink: 0;
  width: auto;
}
</style>
